<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 100px;
        }

        li {
            list-style: none;
        }

        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid rgb(235, 163, 175);
            outline: none;
            resize: none;
        }
        button{
            width: 40px;
            text-align: center;
        }
        ul {
            margin-top: 50px;
        }

        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }

        li a {
            float: right;
        }
    </style>
</head>

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>

    </ul>
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 2. 注册事件
        btn.disabled = true;//按钮初始化设置为禁用
        text.onfocus = function () { //鼠标聚焦文本框时，按钮禁用取消
            btn.disabled = false;
        }
        /*   text.onblur = function () { //鼠标聚焦文本框时，按钮禁用取消
              btn.disabled = true;
          } */


        text.onblur = function (e) {    //不聚焦文本时，若点击空白，按钮禁用；否则按钮开启
            if (e.relatedTarget === null) {
                btn.disabled = true;
            }
            else {
                btn.disabled = false;
            }
            // console.log(e);
        }
        
        //按下s则聚焦文本
        document.addEventListener('keyup', function (e) {
            if (e.keyCode === 83) {
                text.focus();
            }
        })

        //回车键发布方式
        text.addEventListener('keydown', function (e) {

            if (e.keyCode === 13) {
                var reg = /^\s*(\S+)\s*$/;
                if (reg.test(text.value)) {
                    //如果用户输入的内容,开头或结尾带有空格,则将空格去掉,重新赋给文本框的value属性
                    text.value = RegExp.$1;
                    // alert("验证通过");
                }
                else {
                    //如果用户只输入了空格,则将空格清空
                    // text.value = "";
                    text.value = text.value.replace(/\s/g, "");
                }

                //检测是否有空格
                /*  if (text.value.indexOf(' ') >= 0) {
                     // console.log('有空格');
                     alert('您输入有空格');
                     return false;
                 } */

                if (text.value == '') {
                    btn.disabled = true;
                    alert('您没有输入内容');
                    return false;
                }
                else {
                    // console.log(text.value);
                    // (1) 创建元素
                    var li = document.createElement('li');
                    // 先有li 才能赋值
                    li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
                    // (2) 添加元素
                    // ul.appendChild(li);
                    ul.insertBefore(li, ul.children[0]);
                    text.value = "";//清空已发布的
                }
                btn.disabled = true;  //发布完成后按钮禁用
                text.blur();  //聚焦去除

                // (3) 删除元素 删除的是当前链接的li  它的父亲
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        // node.removeChild(child); 删除的是 li 当前a所在的li  this.parentNode;
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        });

        //按钮发布方式
        btn.onclick = function () {
            var reg = /^\s*(\S+)\s*$/;
            if (reg.test(text.value)) {
                //如果用户输入的内容,开头或结尾带有空格,则将空格去掉,重新赋给文本框的value属性
                text.value = RegExp.$1;
                // alert("验证通过");
            }
            else {
                //如果用户只输入了空格,则将空格清空
                // text.value = "";
                text.value = text.value.replace(/\s/g, "");
            }

            //检测是否有空格
            /*  if (text.value.indexOf(' ') >= 0) {
                 // console.log('有空格');
                 alert('您输入有空格');
                 return false;
             } */

            if (text.value == '') {
                btn.disabled = true;
                alert('您没有输入内容');
                return false;
            }
            else {
                // console.log(text.value);
                // (1) 创建元素
                var li = document.createElement('li');
                // 先有li 才能赋值
                li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
                // (2) 添加元素
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
                text.value = "";//清空已发布的
            }
            btn.disabled = true;  //发布完成后按钮禁用

            // (3) 删除元素 删除的是当前链接的li  它的父亲
            var as = document.querySelectorAll('a');
            for (var i = 0; i < as.length; i++) {
                as[i].onclick = function () {
                    // node.removeChild(child); 删除的是 li 当前a所在的li  this.parentNode;
                    ul.removeChild(this.parentNode);
                }
            }
        }




    </script>
</body>

</html>